HTMX একটি শক্তিশালী লাইব্রেরি যা HTML Attribute-Based Approach ব্যবহার করে AJAX রিকোয়েস্ট, ডাইনামিক কন্টেন্ট লোড এবং সার্ভার সাইড ইন্টারঅ্যাকশন সহজ করে। নিচে Django, Flask এবং Express.js ফ্রেমওয়ার্কের সাথে HTMX ইন্টিগ্রেশনের উদাহরণ দেওয়া হলো।
1. HTMX এবং Django ইন্টিগ্রেশন
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
pip install django
Django প্রোজেক্ট তৈরি করুন:
django-admin startproject myproject
cd myproject
django-admin startapp myapp
Django Views তৈরি করুন:
myapp/views.py:
from django.shortcuts import render
from django.http import JsonResponse
def index(request):
return render(request, 'index.html')
def fetch_data(request):
return JsonResponse({"message": "Hello from Django!"}) # JSON response
def submit_data(request):
if request.method == "POST":
username = request.POST.get('username')
return render(request, 'response.html', {'username': username}) # Render response
Django URLs সেটআপ করুন:
myapp/urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('fetch-data/', views.fetch_data, name='fetch_data'),
path('submit-data/', views.submit_data, name='submit_data'),
]
myproject/urls.py:
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('myapp.urls')),
]
HTMX ব্যবহার করে HTML ফাইল তৈরি করুন:
templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Django HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="{% url 'fetch_data' %}" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="{% url 'submit_data' %}" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
templates/response.html:
<p>Submitted username: {{ username }}</p>
Django সার্ভার চালানো
python manage.py runserver
ব্রাউজার এ অ্যাক্সেস করুন
এখন ব্রাউজারে http://127.0.0.1:8000 এ যান। HTMX ব্যবহার করে ডেটা ফেচ এবং সাবমিট করা যাবে।
2. HTMX এবং Flask ইন্টিগ্রেশন
Flask সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
pip install flask
Flask অ্যাপ্লিকেশন তৈরি করুন:
app.py:
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/fetch-data')
def fetch_data():
return jsonify(message="Hello from Flask!") # JSON response
@app.route('/submit-data', methods=['POST'])
def submit_data():
username = request.form.get('username')
return render_template('response.html', username=username) # Render response
if __name__ == '__main__':
app.run(debug=True)
HTMX ব্যবহার করে HTML ফাইল তৈরি করুন:
templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="/fetch-data" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="/submit-data" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
templates/response.html:
<p>Submitted username: {{ username }}</p>
Flask সার্ভার চালানো
python app.py
ব্রাউজার এ অ্যাক্সেস করুন
এখন ব্রাউজারে http://127.0.0.1:5000 এ যান। HTMX ব্যবহার করে ডেটা ফেচ এবং সাবমিট করা যাবে।
3. HTMX এবং Express.js ইন্টিগ্রেশন
Express.js সেটআপ
প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
npm install express ejs body-parser
Express.js অ্যাপ্লিকেশন তৈরি করুন:
app.js:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.render('index');
});
app.get('/fetch-data', (req, res) => {
res.json({ message: "Hello from Express!" }); // JSON response
});
app.post('/submit-data', (req, res) => {
const username = req.body.username;
res.render('response', { username }); // Render response
});
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});
HTMX ব্যবহার করে HTML ফাইল তৈরি করুন:
views/index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express HTMX Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
</head>
<body>
<h2>Fetch Data</h2>
<button hx-get="/fetch-data" hx-target="#data-container">Fetch Data</button>
<div id="data-container">Data will be loaded here...</div>
<h2>Submit Data</h2>
<form hx-post="/submit-data" hx-target="#response-container">
<input type="text" name="username" placeholder="Enter your name" required>
<button type="submit">Submit</button>
</form>
<div id="response-container">Response will be shown here.</div>
</body>
</html>
views/response.ejs:
<p>Submitted username: <%= username %></p>
Express.js সার্ভার চালানো
node app.js
ব্রাউজার এ অ্যাক্সেস করুন
এখন ব্রাউজারে http://localhost:3000 এ যান। HTMX ব্যবহার করে ডেটা ফেচ এবং সাবমিট করা যাবে।
উপসংহার
HTMX এর সাথে Django, Flask এবং Express.js এর ইন্টিগ্রেশন খুবই সহজ এবং কার্যকর। HTMX এর মাধ্যমে AJAX রিকোয়েস্ট এবং ডাইনামিক কন্টেন্ট লোডের প্রক্রিয়া একটি স্বচ্ছন্দ এবং দ্রুত কার্যক্রম তৈরি করে, যা ব্যবহারকারীদের জন্য উন্নত ইউজার এক্সপেরিয়েন্স নিশ্চিত করে।
- Django: URL এবং ভিউ ফাংশনের মাধ্যমে HTMX সংযোগ।
- Flask: সহজ এবং দ্রুত ফ্লাস্ক অ্যাপ্লিকেশন সহ HTMX ইন্টিগ্রেশন।
- Express.js: Node.js পরিবেশে HTMX ব্যবহার করে ডাইনামিক কন্টেন্ট লোড করা।
এই উদাহরণগুলি অনুসরণ করে, আপনি আপনার প্রোজেক্টে HTMX অন্তর্ভুক্ত করতে পারেন এবং ডাইনামিক ও ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারেন।
Content added By
Read more
